<template>
  <el-menu
      :default-active="this.$store.state.menus.editableTabsValue"
      class="el-menu-vertical-demo"
      background-color="#313131"
      active-text-color="#ffd04b"
      text-color="#ccc"
  >
    <!-- 首页显示 -->
    <router-link to="/sys/index">
      <el-menu-item
          index="Index"
          @click="selectMenu({ name: 'Index', title: '简介' })"
      >
        <template slot="title">
          <i class=""></i>
          <span slot="title">FlyCat承德旅游网</span>
        </template>
      </el-menu-item>
    </router-link>

    <!-- 菜单来自数据库 -->
    <el-submenu
        :index="menu.name"
        v-for="(menu, index) in menuList"
        :key="index"
    >
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{ menu.title }}</span>
      </template>

      <router-link
          :to="{ path: item.path }"
          v-for="(item, chindex) in menu.children"
          :key="chindex"
      >
        <el-menu-item :index="item.name" @click="selectMenu(item)">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </template>
        </el-menu-item>
      </router-link>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {};
  },
  computed: {
    menuList: {
      get() {
        return this.$store.state.menus.menuList;
      },
    },
  },
  methods: {

    // 选择菜单
    selectMenu(item) {
      // 状态管理
      this.$store.commit("addTab", item);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100%;
}

.el-submenu .el-menu-item {
  min-width: 100px;
}
</style>